<template>
	<view>
		<view class="content f-dc">
			<u-navbar title="发起人设置" :fixed="false" leftIconColor="#fff" :autoBack="true">
			</u-navbar>
			<view class="content_main">
				<view style="padding: 10px;background-color: #fffee9;" class="x-f">
					<button type="primary" size="mini" style="width: fit-content;"
						@click="addPromoter">添加/修改发起人</button>
				</view>

				<view class="promoter_content drawer_content" style="padding: 10px 15px;">


					<view
						style="display: flex;flex-wrap: wrap;min-height: 120px;border: 2px solid #cecece;padding: 10px;">
						<u-tag style="width: fit-content;margin-left: 10px;" v-for="item in flowPermission1"
							:text="item.name" plain size="mini" type="warning"></u-tag>
					</view>

				</view>
			</view>


			<view class="content_bottom x-ec" :style="$m.utils.disposeSafeBottomFun()">
				<button @click="closePage" class="content_bottom_primary_plainBtn CommonBtnSize">取消</button>
				<button @click="submitPage" class="content_bottom_primary_Btn CommonBtnSize">确定</button>
			</view>
		</view>

		<mTransfer :show.sync="showTransfer" :option="option" @close="closeTransfer" @submit="submitTransfer">
		</mTransfer>
	</view>
</template>

<script>
	import mTransfer from '@/uni_modules/mc-ui/components/m-node-warp/compontent/m-transfer/m-transfer.vue';
	export default {
		components: {
			mTransfer
		},
		data() {
			return {
				showTransfer: false, // 穿梭框
				typeName: '',
				option: {
					typeName: '',
					title: '',
					childDepartments: [],
					employees: [],
				},
				flowPermission1: [],
			};
		},
		onLoad(option) {
			console.log(option);
			if (!uni.$m.utils.isEmpty(option)) {
				this.typeName = option.typeName;
				this.option.title = option.str;
				this.option.typeName = option.typeName;

				console.log(this.$store.state.BaseScreenParm);
				this.flowPermission1 = JSON.parse(JSON.stringify(this.$store.state.BaseScreenParm))

			} else {
				uni.$m.utils.msg('数据异常，请重试！')
			}

		},
		methods: {
			arrToStr(arr) {
				console.log(arr);
				if (!uni.$m.utils.isEmpty(arr)) {
					let text = arr.map(item => {
						return item.name
					})
					return text.join(',')
				} else {
					return '所有人'
				}
			},
			closeTransfer() { // 关闭弹层
				this.showTransfer = false;
			},
			submitTransfer(data) { // 确认弹层
				let {
					checkedDepartmentList,
					checkedEmployessList
				} = data;
				let flowPermission1 = [];

				checkedDepartmentList.map(item => {
					flowPermission1.push({
						type: 3,
						targetId: item.id,
						name: item.departmentName
					})
				});
				checkedEmployessList.map(item => {
					flowPermission1.push({
						type: 1,
						targetId: item.id,
						name: item.employeeName
					})
				});
				console.log(flowPermission1);
				this.flowPermission1 = JSON.parse(JSON.stringify(flowPermission1));

				this.option.employees = [];
				this.option.childDepartments = [];
				for (var i = 0; i < this.flowPermission1.length; i++) {
					var {
						type,
						name,
						targetId
					} = this.flowPermission1[i];
					if (type == 1) {
						this.option.employees.push({
							employeeName: name,
							id: targetId
						});
					} else if (type == 3) {
						this.option.childDepartments.push({
							departmentName: name,
							id: targetId
						});
					}
				};
				console.log(this.option);
				this.showTransfer = false;

			},
			addPromoter() {


				this.option.employees = [];
				this.option.childDepartments = [];
				for (var i = 0; i < this.flowPermission1.length; i++) {
					var {
						type,
						name,
						targetId
					} = this.flowPermission1[i];
					if (type == 1) {
						this.option.employees.push({
							employeeName: name,
							id: targetId
						});
					} else if (type == 3) {
						this.option.childDepartments.push({
							departmentName: name,
							id: targetId
						});
					}
				};

				this.showTransfer = true;
				console.log(this.option);
				// 为了触发子组件弹层数据监听
				this.option = JSON.parse(JSON.stringify(this.option));
			},
			closePage() { // 点击取消按钮，关闭页面
				uni.navigateBack();
			},
			submitPage() { // 点击确认按钮

				console.log(this.flowPermission1);
				console.log(this.option);
				// 触发上一页事件监听
				uni.$emit('gitCellCardInfo' + this.$store.state.nodewarpIndex, {
					data: {
						option: this.option,
						flowPermission: this.flowPermission1
					}
				});

				this.closePage();
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;

		.content_bottom {
			button {
				margin-right: 10px !important;
			}
		}
	}
</style>